<template>
  <div class="category-container">
    <div class="category-header">
      <h2 class="category-title">农产品分类</h2>
      <div class="category-subtitle">优质农产品，品类齐全</div>
    </div>
    
    <div class="category-grid">
      <div 
        v-for="category in categories" 
        :key="category.id" 
        class="category-card"
        @click="handleCategoryClick(category)"
        :data-category="category.name"
      >
        <div class="category-icon-wrapper">
          <i :class="getCategoryIcon(category.name)"></i>
        </div>
        <div class="category-info">
          <h3 class="category-name">{{ category.name }}</h3>
          <div class="category-count">{{ getProductCount(category) }}+ 种产品</div>
        </div>
        <div class="category-arrow">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    
    <div class="view-all-btn" @click="viewAllCategories">
      <span>查看全部分类</span>
      <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>

<script>
import Request from '@/utils/request'

export default {
  name: 'FrontCategory',
  data() {
    return {
      categories: [],
      productCounts: {}
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    async getCategories() {
      try {
        const res = await Request.get('/category/list')
        if (res.code === '0') {
          this.categories = res.data.slice(0, 8) // 限制显示数量
          this.getProductCountsByCategory()
        }
      } catch (error) {
        console.error('获取分类失败:', error)
      }
    },
    async getProductCountsByCategory() {
      try {
        const res = await Request.get('/product/counts-by-category')
        if (res.code === '0') {
          this.productCounts = res.data || {}
        }
      } catch (error) {
        console.error('获取产品数量统计失败:', error)
      }
    },
    getCategoryIcon(name) {
      const iconMap = {
        '蔬菜': 'el-icon-food',
        '水果': 'el-icon-cherry',
        '粮油': 'el-icon-dish',
        '肉类': 'el-icon-chicken',
        '海鲜': 'el-icon-dessert',
        '乳制品': 'el-icon-ice-cream',
        '零食': 'el-icon-ice-cream-square',
        '饮料': 'el-icon-milk-tea',
        '酒水': 'el-icon-grape',
        '茶叶': 'el-icon-coffee',
        '干货': 'el-icon-fork-spoon',
        '调味品': 'el-icon-tableware',
        '其他': 'el-icon-shopping-bag-2'
      }
      return iconMap[name] || 'el-icon-shopping-bag-2'
    },
    getProductCount(category) {
      // 如果没有真实数据，返回随机数作为演示
      return this.productCounts[category.id] || Math.floor(Math.random() * 30) + 10
    },
    handleCategoryClick(category) {
      this.$router.push({
        path: '/products',
        query: {
          categoryId: category.id
        }
      })
    },
    viewAllCategories() {
      this.$router.push('/products')
    }
  }
}
</script>

<style scoped>
.category-container {
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.category-header {
  text-align: center;
  margin-bottom: 30px;
}

.category-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px;
  position: relative;
  display: inline-block;
}

.category-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #4caf50, #81c784);
  border-radius: 3px;
}

.category-subtitle {
  color: #666;
  font-size: 16px;
  margin-top: 16px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.category-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(129, 199, 132, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
}

.category-card:hover::before {
  opacity: 1;
}

.category-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4caf50, #81c784);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
  transition: transform 0.3s ease;
}

.category-card:hover .category-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.category-icon-wrapper i {
  font-size: 28px;
  color: white;
}

.category-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.category-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px;
}

.category-count {
  font-size: 13px;
  color: #888;
}

.category-arrow {
  margin-left: 10px;
  color: #ccc;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.category-card:hover .category-arrow {
  color: #4caf50;
  transform: translateX(5px);
}

.view-all-btn {
  text-align: center;
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #f5f5f5;
  border-radius: 30px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.view-all-btn:hover {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.view-all-btn i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.view-all-btn:hover i {
  transform: translateX(5px);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .category-title {
    font-size: 24px;
  }
  
  .category-subtitle {
    font-size: 14px;
  }
  
  .category-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .category-icon-wrapper i {
    font-size: 24px;
  }
  
  .category-name {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .category-card {
    padding: 15px;
  }
  
  .category-icon-wrapper {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  
  .category-icon-wrapper i {
    font-size: 20px;
  }
  
  .category-name {
    font-size: 14px;
  }
  
  .category-count {
    font-size: 12px;
  }
  
  .category-arrow {
    display: none;
  }
}
</style> 